<!-- 邀请组件 -->
<template>
  <a-modal
    :visible="modalVisible"
    title="邀请成员"
    :footer="null"
    @cancel="handleCancel(0)">
    <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData" :rules="formRules" ref="formRef">
      <a-form-model-item label="编号" prop="researchNo">
        <a-input v-model="formData.researchNo" placeholder="请输入编号" />
      </a-form-model-item>
      <a-form-model-item label="姓名" prop="name">
        <a-input v-model="formData.name" width="100%"/>
      </a-form-model-item>
      <a-form-model-item label="手机" prop="phone">
        <a-input v-model="formData.phone" width="100%"/>
      </a-form-model-item>
      <a-form-model-item label="邮箱" prop="email">
        <a-input v-model="formData.email" width="100%"/>
      </a-form-model-item>
      <a-form-model-item label="组织机构">
        <a-input v-model="hospitalNameProp" disabled width="100%"/>
      </a-form-model-item>
      <a-form-model-item label="选择科室">
        <!-- @change="handleDepartmentChange" -->
        <a-select
          v-model="formData.orgDeptId"
          allowClear
        >
          <a-select-option v-for="item in departmentListProp" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="职务">
        <a-input v-model="formData.position" />
      </a-form-model-item>
      <a-form-model-item label="中心负责人" prop="mainResearch">
        <a-select
          v-model="formData.mainResearch"
          @change="handleResearchChange" >
          <a-select-option :value="1">是</a-select-option>
          <a-select-option :value="0">否</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="角色" prop="roleId">
        <a-select v-model="formData.roleId">
          <!-- 后端定死的只有一条 -->
          <!-- <a-select-option :value="2">PI</a-select-option> -->
          <a-select-option v-for="item in rolesList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="是否为审核人" prop="isCheck">
        <a-radio-group v-model="formData.isCheck" name="radioGroup">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-row :gutter="48">
        <a-col :md="24" :sm="24">
          <a-button type="primary" :loading="submitting" @click="handleInvitation" style="float: right">发送邀请</a-button>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
// import { addCenterMember, getRolesList } from '@/api/overview/member'
import { addCenterMember, getNewRolesList } from '@/api/overview/member'
export default {
  props: {
    researchId: { // 研究中心Id
      type: [String, Number],
      default: null
    },
    departmentListProp: { // 科室列表
      type: Array,
      default: () => {
        return []
      }
    },
    hospitalNameProp: {
      type: String,
      default: null
    },
    modalVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      formData: {
        roleId: null,
        isCheck: 0
      },
      isResearch: false,
      formRules: {
        researchNo: [{ required: true, message: '请输入编号', trigger: 'change' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误' }
        ],
        email: [
          { required: false },
          { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '邮箱格式错误' }
        ],
        mainResearch: [{ required: true, message: '请选择是否为中心负责人', trigger: 'change' }],
        roleId: [{ required: true, message: '请选择角色', trigger: 'change' }]
      },
      submitting: false,
      rolesList: []
    }
  },
  created () {
    this.getNewRolesList()
  },
  methods: {
    // 科室选择改变
    // handleDepartmentChange (value) {
    //   this.formData.orgDeptId = value
    //   console.log(value, '选择的科室')
    // },
    // 获取角色列表
    getNewRolesList () {
      getNewRolesList({ proId: this.$route.query.id })
        .then(res => {
          if (res && res.length) {
            // this.rolesList = [res.find(item => item.code === 'Investigator')]
            this.rolesList = res.filter(item => item.code === 'Investigator')
            console.log(this.rolesList, '过滤出的')
          }
        })
    },
    // 主要负责人下拉改变
    handleResearchChange (val) {
      console.log(typeof val)
      // if (val) {
      //   // this.formData.roleId = 2
      //   this.formData.roleId = this.rolesList[0].id
      //   this.isResearch = true
      // } else {
      //   this.formData.roleId = null
      //   this.isResearch = false
      // }
    },
    // 点击发送邀请
    handleInvitation () {
      this.$refs.formRef.validate(valid => {
        if (!valid) {
          this.$message.error('请填写完整信息')
          return false
        }
        const invitationData = { ...this.formData }
        if (this.$route.query.id) {
          invitationData.proId = this.$route.query.id
        }
        invitationData.researchId = this.researchId
        // if (invitationData.orgDeptId) {
        //   // invitationData.orgDeptId = this.formData.orgDeptId.toString()
        // }
        this.submitting = true
        addCenterMember({ ...invitationData })
          .then(res => {
            this.submitting = false
            // 成功发送邀请后，通知父组件刷新列表
            this.handleCancel(1)
            this.$message.success('发送成功')
          })
          .catch(() => {
            this.submitting = false
          })
        })
    },
    // 点击取消对话框消失
    handleCancel (val) {
      this.$emit('closeModal', val)
      this.$refs.formRef.resetFields()
      this.formData = {
        roleId: null,
        isCheck: 0
      }
    }
  }
}
</script>
<style scoped lang="scss">

</style>
